import {DefaultFooter} from '@ant-design/pro-components';
import {Button, Carousel, ConfigProvider, Segmented} from 'antd';
import useStyles from './Home.style';
import {TinyColor} from '@ctrl/tinycolor';
import {history, useModel} from '@umijs/max'
import stressTest from "./imaegs/stress-test.png";
import uiTest from "./imaegs/ui-test.png";
import apiTest from "./imaegs/api-test.png";


const contentStyle: React.CSSProperties = {
  // height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
  borderRadius: 30,
  height: 900,
};

const Home: React.FC = ({}: any) => {
  const {styles} = useStyles();
  const {initialState} = useModel('@@initialState')

  const colors3: any[] = [`${initialState?.settings?.colorPrimary}42`, `${initialState?.settings?.colorPrimary}82`, initialState?.settings?.colorPrimary];
  console.log(colors3);

  const getHoverColors = (colors: string[]) =>
    colors.map((color) => new TinyColor(color).lighten(5).toString());
  const getActiveColors = (colors: string[]) =>
    colors.map((color) => new TinyColor(color).darken(5).toString());

  return <div style={{background: 'url(http://dmeter.cn/assets/background-Sa1aDD1c.png) no-repeat center'}}>
    <div className={styles.header}>

      <div className={styles.header_wrap}>

        <div className={styles.header_left}>
          <img width={45} src={'/logo.svg'} style={{marginRight: 10}}/>
          烟蓝自动化测试平台
        </div>
        <div className={styles.header_right_menu}>
          <Segmented
            size='large'
            style={{width: 500}}
            block
            options={[
              {label: '首页', value: 'home'},
              {label: '联系我们', value: 'contact_us'},
              {label: '加入我们', value: 'join_us'},
              {
                label: <div onClick={() => {
                  history.push('/common-menu/user')
                }}>立即体验</div>, value: 'experience'
              },
            ]}/>
          {/* <div style={{ color: initialState?.settings?.colorPrimary, fontWeight: 'bold', cursor: 'pointer' }}> 首页 </div>
                    <div style={{ cursor: 'pointer' }}> 联系我们 </div>
                    <div style={{ cursor: 'pointer' }}> 加入我们 </div>
                    <div style={{ cursor: 'pointer' }} onClick={() => {
                        history.push('/common-menu/user')
                    }}> 立即体验 </div> */}
        </div>
      </div>
    </div>
    <div className={styles.banner1}>
      <div className={styles.banner1_left}>
        <h1>烟蓝自动化测试平台</h1>
        <h3>平台简介</h3>
        <p style={{color: '#444'}}>高效解决企业测试痛点</p>
        <p style={{color: '#444'}}>统一接口自动化、UI自动化、压力测试</p>
        <p style={{color: '#444'}}>支持公有云和私有云，可视化测试编排</p>
        <p style={{color: '#444'}}>自动生成测试报告，省时提效，保障软件质量</p>
        <p style={{color: '#444'}}>加速交付周期，让测试变得更轻松、更高效！</p>
        <ConfigProvider
          theme={{
            components: {
              Button: {
                colorPrimary: `linear-gradient(116deg,  ${colors3.join(', ')})`,
                colorPrimaryHover: `linear-gradient(116deg, ${getHoverColors(colors3).join(', ')})`,
                colorPrimaryActive: `linear-gradient(116deg, ${getActiveColors(colors3).join(', ')})`,
                lineWidth: 0,
              },
            },
          }}
        >
          <Button onClick={() => {
            history.push('/common-menu/user')
          }}
                  style={{width: 150}} type="primary" size="large" shape="round">
            立即体验
          </Button>
        </ConfigProvider>
      </div>
      <div className={styles.banner1_right}>
        <img width={680} height={352} src="http://dmeter.cn/assets/illustration-NfGJIpMG.png" alt=""/>
      </div>
    </div>


    <div className={styles.banner2}>
      <div className={styles.title}>功能介绍</div>
      <div className={styles.line}></div>
    </div>

    <div className={styles.banner3}>
      <div className={styles.img_wrap}>
        <img width={480} src={apiTest} alt=""/>
      </div>
      {/* <div style={{ width: 140, flexShrink: 0 }}></div> */}
      <div className={styles.desc}>
        <h1 style={{textAlign: 'center'}}>接口自动化</h1>
        <p style={{color: '#444'}}>提供一套完整的接口自动化测试解决方案，</p>
        <p style={{color: '#444'}}>包括接口测试用例设计、数据驱动、断言验</p>
      </div>
    </div>

    <div className={styles.banner4}>

      <div className={styles.banner4_wrap}>
        <div className={styles.desc}>
          <h1 style={{textAlign: 'center'}}>UI自动化</h1>
          <p style={{color: '#444'}}>模拟用户真实操作来测试软件系统的界面功</p>
          <p style={{color: '#444'}}>能，支持多种主流浏览器，满足不同环境下</p>
          <p style={{color: '#444'}}>的测试需求</p>
        </div>
        {/* <div style={{ width: 140 }}></div> */}
        <div className={styles.img_wrap}>
          <img width={480} src={uiTest} alt=""/>
        </div>
      </div>
    </div>

    <div className={styles.banner5}>
      <div className={styles.img_wrap}>
        <img width={480} src={stressTest} alt=""/>
      </div>
      {/* <div style={{ width: 140 }}></div> */}
      <div className={styles.desc}>
        <h1 style={{textAlign: 'center'}}>压力测试</h1>
        <p style={{color: '#444'}}>支持各种压测脚本和策略，灵活的场</p>
        <p style={{color: '#444'}}>景设置，实时监控和告警，多种协议</p>
        <p style={{color: '#444'}}>支持，详细的测试报告</p>
      </div>
    </div>


    <div className={styles.banner6}>
      <div className={styles.title}>使用场景介绍</div>
      <div className={styles.line}></div>

      <div className={styles.banner7}>
        <Carousel autoplay arrows effect="fade"
                  style={{overflow: 'hidden', height: 900}}
        >
          <div style={contentStyle}>
            <img src={apiTest} alt=""/>
          </div>
          <div style={contentStyle}>
            <img src={uiTest} alt=""/>
          </div>
          <div style={contentStyle}>
            <img src={stressTest} alt=""/>
          </div>
        </Carousel>
      </div>
    </div>

    <div className={styles.banner8}>
      <p style={{fontSize: 72, marginBottom: 10, fontWeight: 'bold'}}>想 加 入 吗</p>
      <p style={{fontSize: 36, marginBottom: 10, fontWeight: 'bold'}}>我们需要你的加入</p>

      <div style={{
        // width: 600,
        padding: '20px 40px',
        marginTop: 40,
        boxShadow: 'rgba(39, 77, 160, 0.73) 0px 6px 43px 0px, rgba(43, 82, 163, 0.28) 0px -1px 8px 0px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 60,
      }}>
        <input style={{
          width: 230,
          height: 50,
          border: 0,
          outline: 0,
          borderRadius: 60,
          paddingLeft: 20,
          backgroundColor: '#e1eaef',
          fontWeight: 'bold',
        }} placeholder='请输入您的联系方式'/>
        <span style={{marginLeft: 70, fontWeight: 'bold', cursor: 'pointer'}}>在此点击加入我们  →</span>
      </div>
    </div>


    <DefaultFooter
      style={{
        padding: '5px 0'
      }}
      copyright="@2024 烟蓝技术研讨会"
      links={[
        {
          key: '烟蓝云测',
          title: '烟蓝云测',
          href: '',
          blankTarget: true,
        },
      ]}
    />
  </div>
};

export default Home;
